﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="../00 CSS/global.css" />
    <style type="text/css">
        /*下划线*/
        #simple a:link, #simple a:visited {
            text-decoration: none;
        }

        #simple a:hover, #simple a:focus, #simple a:active {
            text-decoration: underline;
        }

        /*使用定制的gif图片*/
        #gifLink a:link, #gifLink a:visited {
            color: #666;
            text-decoration: none;
            background: url(img/underline1.gif) repeat-x left bottom;
        }

        #gifLink a:hover, #gifLink a:active {
            background-image: url(img/underline1-hover.gif);
        }

        /*区分外部衔接和内部衔接*/
        #externalLink a[href ^="http:"] {
            background: url(img/externalLink.gif) no-repeat right top;
            padding-right: 10px;
        }

        /*按钮衔接*/
        a.one {
            display: block;
            width: 6.6em;
            line-height: 1.4;
            text-align: center;
            text-decoration: none;
            border: 1px solid #66a300;
            background-color: #8cca12;
            color: #fff;
            margin: 5px;


            border-radius: 6px;
            /*text-shadow: 2px 2px 2px #66a300;
            box-shadow:2px 2px 2px #ccc;*/
        }
        /*衔接背景颜色颜色翻转*/
        a.one:hover, a.one:focus {
            background-color: #f7a300;
            border-color: #ff7400;
        }

        a.two {
            display: block;
            width: 203px;
            height: 72px;
            text-indent: -1000em;
            background: url(img/button.png) left top no-repeat;
        }

        a.two:hover {
            background-image: url(img/button-over.png);
        }

        a.two:active {
            background-image: url(img/button-active.png);
        }

        /*衔接信息*/
        a.tooltip {
            position: relative;
        }

        a.tooltip span {
            display: none;
        }

        a.tooltip:hover span {
            display: block;
            position: absolute;
            top: 1em;
            left: 2em;
            width: 8.5em;
            padding: 0.2em 0.6em;
            border: 1px solid #996633;
            background-color: #FFFF66;
            color: #000;
        }
    </style>
</head>
<body>
    <div id="simple">
        <h2>去掉下划线， 悬停单击才显示下划线</h2>
        <ul>
            <li><a href="http://www.baidu.com" target="_blank" name="inner">新闻</a></li>
            <li><a href="http://www.baidu.com" target="_blank">贴吧</a></li>
            <li><a href="http://www.baidu.com" target="_blank">知道</a></li>
        </ul>
    </div>

    <div id="gifLink">
        <h2>定制的衔接下划线</h2>
        <ul>
            <li><a href="http://www.baidu.com" target="_blank">图片</a></li>
            <li><a href="http://www.baidu.com" target="_blank">音乐</a></li>
            <li><a href="http://www.baidu.com" target="_blank">视频</a></li>
        </ul>
    </div>

    <div id="externalLink">
        <h2>使用属性选择器的匹配功能 匹配外部衔接</h2>
        <ul>
            <li><a href="#inner">这是一个内部衔接</a></li>
            <li><a href="http://www.baidu.com" target="_blank">衔接到baidu</a></li>
        </ul>
    </div>

    <div id="buttonLink">
        <h2>使衔接表现的像按钮一样</h2>
        <a href="#" class="one">背景颜色翻转</a>
        <a href="#" class="two">背景图片翻转</a>
    </div>

    <div id="tip">
        <h2>tip信息显示</h2>
        <p><a href="http://www.andybudd.com/" class="tooltip">Andy Budd<span> (This website rocks) </span></a> is a web developer based in Brighton England.</p>
    </div>
    
</body>
</html>
